Getting Started with React Development with the React Suite Library — Dropdowns

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Dropdowns

We can add a select dropdown with the Dropdown component.

For instance, we can write:

import React from "react";
import { Dropdown } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

The title prop has the placeholder.

Dropdown.Item has the dropdown items.

We can change how a dropdown is opened.

For instance, we can make it open on hover by setting the trigger prop:

import React from "react";
import { Dropdown } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" trigger="hover">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

We can make a context menu by setting trigger to 'contextMenu' :

import React from "react";
import { Dropdown } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" trigger="contextMenu">
        <Dropdown.Item>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

The default value of trigger is 'click' .

We can also assign a key to each item and set the default key.

To do this, we write:

import React from "react";
import { Dropdown } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" activeKey="a">
        <Dropdown.Item eventKey="a">Apple</Dropdown.Item>
        <Dropdown.Item eventKey="b">Orange</Dropdown.Item>
        <Dropdown.Item eventKey="c">Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

We set activeKey to 'a' to set the active key.

eventKey is assigned to each item.

If activeKey and eventKey match, then the item will be highlighted.

To disable an item, we can add the disabled prop to it:

import React from "react";
import { Dropdown } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit">
        <Dropdown.Item disabled>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

We can change the size of a dropdown button with the size prop:

import React from "react";
import { Dropdown } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" size="lg">
        <Dropdown.Item disabled>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

'lg' is large.

We can make it extra small with 'xs' .

'sm' is small. And 'md' is medium.

We can remove the caret from the dropdown button with the noCaret prop:

import React from "react";
import { Dropdown } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" noCaret>
        <Dropdown.Item disabled>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

And we can add an icon to the button with the icon prop:

import React from "react";
import { Dropdown, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Dropdown title="Fruit" icon={<Icon icon="file" />}>
        <Dropdown.Item disabled>Apple</Dropdown.Item>
        <Dropdown.Item>Orange</Dropdown.Item>
        <Dropdown.Item>Grape</Dropdown.Item>
      </Dropdown>
    </div>
  );
}

Conclusion

We can add simple dropdown menus into our React app with React Suite.